<template>
  <div class="participant-list-container">
    <div class="list-panel">
      <div class="panel-header">
        <div class="panel-title">
          <el-icon><Document /></el-icon>
          <span>费用报销的参保人员信息查询</span>
        </div>
      </div>
      
      <div class="search-section">
        <el-input
          v-model="searchQuery"
          placeholder="参保人员姓名"
          class="search-input"
          clearable
        >
          <template #append>
            <el-button @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
          </template>
        </el-input>
      </div>
      
      <el-table
        :data="filteredParticipants"
        stripe
        border
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="hospitalNo" label="住院号" width="100" align="center" />
        <el-table-column prop="name" label="姓名" width="100" align="center" />
        <el-table-column prop="gender" label="性别" width="60" align="center" />
        <el-table-column prop="idCard" label="身份证号" width="180" align="center" />
        <el-table-column prop="address" label="家庭住址" min-width="150" />
        <el-table-column prop="admissionDate" label="入院日期" width="160" align="center" />
        <el-table-column prop="workStatus" label="工作状态" width="100" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.workStatus === '在职' ? 'success' : 'warning'">
              {{ scope.row.workStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="settlementType" label="结算类别" width="100" align="center" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click.stop="handleDetail(scope.row)"
              plain
            >
              详情
            </el-button>
            <el-button
              size="small"
              type="success"
              @click.stop="handleReimburse(scope.row)"
              plain
            >
              报销
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalParticipants"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { Document, Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const router = useRouter();
const searchQuery = ref('');
const currentPage = ref(1);
const pageSize = ref(10);

// 模拟参保人员数据
const participants = [
  {
    id: 1,
    hospitalNo: '1000001',
    name: '夏浩兴',
    gender: '男',
    idCard: '123123200007011234',
    address: '沈阳市',
    admissionDate: '2022-10-28 02:10:33',
    workStatus: '在职',
    settlementType: '医保'
  },
  {
    id: 2,
    hospitalNo: '1000002',
    name: '李宝辰',
    gender: '男',
    idCard: '123123200007011234',
    address: '河北省秦皇岛市',
    admissionDate: '2022-10-31 03:53:03',
    workStatus: '退休',
    settlementType: '医保'
  },
  {
    id: 3,
    hospitalNo: '1000003',
    name: '郝强国',
    gender: '男',
    idCard: '123123200007011234',
    address: '辽宁',
    admissionDate: '2022-12-22 02:03:02',
    workStatus: '在职',
    settlementType: '医保'
  }
];

// 过滤后的参保人员数据
const filteredParticipants = computed(() => {
  if (!searchQuery.value) {
    return participants;
  }
  return participants.filter(p => 
    p.name.includes(searchQuery.value) || 
    p.hospitalNo.includes(searchQuery.value) ||
    p.idCard.includes(searchQuery.value)
  );
});

// 总参保人员数量
const totalParticipants = computed(() => {
  return filteredParticipants.value.length;
});

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
  ElMessage.success(`搜索关键词: ${searchQuery.value}`);
};

// 处理详情
const handleDetail = (row) => {
  ElMessage.info(`查看参保人员 ${row.name} 的详情`);
  router.push(`/reimbursement/participant-detail/${row.id}`);
};

// 处理报销
const handleReimburse = (row) => {
  ElMessage.success(`开始为 ${row.name} 办理报销`);
  router.push(`/reimbursement/expense-reimbursement/${row.id}`);
};

// 处理每页显示数量变化
const handleSizeChange = (size) => {
  pageSize.value = size;
  ElMessage.info(`每页 ${size} 条`);
};

// 处理页码变化
const handleCurrentChange = (page) => {
  currentPage.value = page;
  ElMessage.info(`当前页: ${page}`);
};
</script>

<style scoped>
.participant-list-container {
  padding: 20px;
}

.list-panel {
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.panel-header {
  margin-bottom: 20px;
}

.panel-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
}

.panel-title .el-icon {
  margin-right: 8px;
  font-size: 18px;
}

.search-section {
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 